<template>
  <div :class="className" :id="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
import { createLogger } from 'vuex';

require('echarts/theme/macarons'); // echarts theme

export default {
  props: {
    className: {
      type: String,
      default: 'chartmain',
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '350px',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    legendShow: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Object,
      required: true,
    },
    minnum: {
      type: Number,
      required: null,
    },
    maxnum: {
      type: Number,
      required: null,
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(()=>{
      this.initChart();
      },80)
     
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    //排序

    initChart() {
      var chartDom3 = document.getElementById(this.className);
      this.chart = echarts.init(chartDom3);
      this.setOptions(this.chartData);
    },
    setOptions({ expectedData, date, name1, color, areaColor } = {}) {
      let that = this;
      this.chart.setOption({
        xAxis: {
          data: date,
          boundaryGap: false,
          axisTick: {
            show: true,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#7C8CA5',
            },
          },
        },
        grid: {
          left: 20,
          right: 20,
          bottom: 10,
          top: 50,
          containLabel: true,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
          },
          padding: [5, 10],
        },
        yAxis: {
          axisTick: {
            show: false,
          },

          //  interval: 5, //一轴间隔值
          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          min: function (value) {
            //取最小值向下取整为最小刻度
            if (value.min > 10) {
              return value.min - 10;
            } else {
              return value.min;
            }
          },
          max: function (value) {
            //取最大值向上取整为最大刻度
            return value.max;
          },
          axisLine: {
            show: false,
            textStyle: {
              color: '#7C8CA5',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#7C8CA5',
            },
          },
        },
        legend: {
          show: false,
          data: [name1],
          x: 'center', // 'center' | 'left' | {number},
          y: 'bottom', // 'center' | 'bottom' | {number}
          orient: 'horizontal', //vertical垂直显示 //horizontal 横排
        },
        series: [
          {
            name: name1,
            itemStyle: {
              normal: {
                color: color,
                lineStyle: {
                  color: color,
                  width: 2,
                },
              },
            },
            areaStyle: {
              //折现下方阴影
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: areaColor, // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: areaColor, // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
            markPoint: {
              symbol: 'pin', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z,  path://m 0,0 h 48 v 20 h -34 l -6,10 l -6,-10 h -2 z
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' },
              ],
            },
            type: 'line',
            data: expectedData,
            animationDuration: 2800,
            animationEasing: 'cubicInOut',
          },
        ],
      });
    },
  },
};
</script>
